<script setup lang="ts">
  import { Form, Space, Select, Input, Button } from '@arco-design/web-vue'
  import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
  import type { SchemaSearchFieldProps } from './interface'
  import { useRouter } from 'vue-router'
  import { isEmpty, debounce } from 'lodash-es'

  const props = defineProps<SchemaSearchFieldProps>()

  const emit = defineEmits<{
    'conditions-change': [val: Record<string, any> | undefined]
  }>()

  const formData = reactive<Record<string, any>>({})

  const isMounted = ref(false)

  const router = useRouter()

  const searchParams = router.currentRoute.value.query

  if (props.isSyncQueryString) {
    props.fields?.forEach(item => {
      const key = item.fieldName
      try {
        formData[key] = JSON.parse(searchParams[key] as string)
      } catch {
        formData[key] = searchParams[key]
      }
    })
  }

  const onConditions = (val: Record<string, any> | undefined) => {
    emit('conditions-change', val)
  }

  const debounceOnConditions = debounce(onConditions, 100)

  onMounted(() => {
    isMounted.value = true
  })

  onUnmounted(() => {
    isMounted.value = false
  })

  watch(
    formData,
    val => {
      const origin = { ...router.currentRoute.value.query }
      const fields = props.fields.map(item => item.fieldName)
      const value = isEmpty(val) ? undefined : { ...val }
      if (isMounted.value) {
        debounceOnConditions(value)
      } else {
        onConditions(value)
      }
      if (isEmpty(val)) {
        for (const key in origin) {
          if (fields.includes(key)) {
            delete origin[key]
          }
        }
      } else {
        for (const key in val) {
          origin[key] = val[key]
        }
      }
      props.isSyncQueryString &&
        router.push({
          query: {
            ...origin,
            page: 1
          }
        })
    },
    {
      immediate: true
    }
  )

  const triggerRest = () => {
    for (const key in formData) {
      delete formData[key]
    }
  }
</script>

<template>
  <div class="search-condition">
    <Form layout="inline" :model="formData" style="overflow-x: auto">
      <Space style="flex-shrink: 0; align-items: center">
        <Form.Item
          v-for="field in fields"
          :key="field.fieldName"
          :field="field.fieldName"
          no-style
          v-bind="{ ...field.formItemProps }"
        >
          <Input
            v-if="field.type === 'Input'"
            :placeholder="'搜索' + field.fieldLabel"
            allow-clear
            v-bind="{ ...field.props }"
            v-model="formData[field.fieldName]"
          />
          <Select
            v-else-if="field.type === 'Select'"
            :placeholder="'筛选' + field.fieldLabel"
            allow-clear
            v-bind="{ ...field.props }"
            v-model="formData[field.fieldName]"
          />
        </Form.Item>
        <div>
          <Button class="mr-8" v-if="resetBtnShow" @click="triggerRest">重置</Button>
        </div>
      </Space>
    </Form>
  </div>
</template>

<style lang="less" scoped>
  .search-condition {
    .arco-space {
      width: 100%;
    }

    .arco-space-item {
      &:last-child {
        flex: 1;
        text-align: right;
      }
    }
  }
</style>
